﻿@page "/chart/step-line"

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@using ThemeHelper

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stepline-chart'>Blazor Step Line Chart</a> example visualizes the unemployment rate from 1975 to 2010 with default step line series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the step line type chart. This series forms the step line progress by connecting points through vertical and horizontal lines. <code>Marker</code> is used to represent individual data and its value. </p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the step line series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/step-line'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Unemployment Rates 1975-2010" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Months" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}%" Interval="5">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@StepLineData" Name="China" XName="Period" Width="2"
                         Opacity="1" YName="CHN_UnemploymentRate" Type="ChartSeriesType.StepLine">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@StepLineData" Name="Australia" XName="Period" Width="2"
                         Opacity="1" YName="AUS_UnemploymentRate" Type="ChartSeriesType.StepLine">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StepLineChartData> StepLineData = new List<StepLineChartData>
    {
         new StepLineChartData { Period = new DateTime(1975, 01, 01), CHN_UnemploymentRate = 16, AUS_UnemploymentRate = 10 },
         new StepLineChartData { Period = new DateTime(1980, 01, 01), CHN_UnemploymentRate = 12.5, AUS_UnemploymentRate = 7.5 },
         new StepLineChartData { Period = new DateTime(1985, 01, 01), CHN_UnemploymentRate = 19, AUS_UnemploymentRate = 11 },
         new StepLineChartData { Period = new DateTime(1990, 01, 01), CHN_UnemploymentRate = 14.4, AUS_UnemploymentRate = 7 },
         new StepLineChartData { Period = new DateTime(1995, 01, 01), CHN_UnemploymentRate = 11.5, AUS_UnemploymentRate = 8 },
         new StepLineChartData { Period = new DateTime(2000, 01, 01), CHN_UnemploymentRate = 14, AUS_UnemploymentRate = 6 },
         new StepLineChartData { Period = new DateTime(2005, 01, 01), CHN_UnemploymentRate = 10, AUS_UnemploymentRate = 3.5 },
         new StepLineChartData { Period = new DateTime(2010, 01, 01), CHN_UnemploymentRate = 16, AUS_UnemploymentRate = 7 }
     };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StepLineChartData
    {
        public DateTime Period { get; set; }
        public double AUS_UnemploymentRate { get; set; }
        public double CHN_UnemploymentRate { get; set; }
    }
}
